<template>
  <div class="row">
    <div class="col-xs-8">
      <topicContent 
        v-if="topic.author"
        :title="topic.title"
        :create_at="topic.create_at"
        :loginname="topic.author.loginname"
        :tab="topic.tab"
        :visit_count="topic.visit_count"
        :content="topic.content"
      ></topicContent>
      <topicComment 
        :reply_count="topic.reply_count"
        :replies="topic.replies"
      ></topicComment>
    </div>
    <div class="col-xs-4">
      <topicAuthorInfo 
        :avatar_url="userInfo.avatar_url"
        :loginname="userInfo.loginname"
        :score="userInfo.score"
      ></topicAuthorInfo>
      <topicAuthorTopics heading-title="作者其他话题" :topics="userInfo.recent_topics"></topicAuthorTopics>
      <topicAuthorTopics :topics="userInfo.recent_replies">作者回复的话题</topicAuthorTopics>
    </div>

  </div>
</template>

<script>
// @被赋予了 src的路径
import topicContent from '@/components/topicDetail/topicContent'
import topicComment from '@/components/topicDetail/topicComment'
import topicAuthorInfo from '@/components/topicDetail/topicAuthorInfo'
import topicAuthorTopics from '@/components/topicDetail/topicAuthorTopics'

export default {
  data () {
    return {
      topic: {},
      userInfo: {}
    }
  },
  watch: {
    '$route': {
      handler (to) {
        const id = to.params.id
        this.axios.get('https://cnodejs.org/api/v1/topic/' + id).then(res => {
          this.topic = res.data.data

          // 根据查询到的文章作者发起新的请求请求新的数据
          const name = this.topic.author.loginname
          return this.axios.get('https://cnodejs.org/api/v1/user/' + name)
        }).then(res => {
          // 请求到用户信息后，将数据给data中的值
          this.userInfo = res.data.data
        })
      },
      immediate: true
    }
  },
  components: {
    topicContent, topicComment, topicAuthorInfo, topicAuthorTopics
  }
}
</script>

<style>

</style>
